<template>
  <div class="home">
    <div class="home-header-placeholder">
      <div class="header-tips"></div>
      <div class="box-button">立即订购</div>
    </div>
    <div class="main-container">
      <div class="about-as">
        <div class="title-box">
          <div class="title-box-cn">关于百分</div>
          <div class="title-box-en">About 100 Points</div>
        </div>
        <div class="grip-box">
          <div class="grip-col-1">
            <div class="grip-col-1-1">
              <div style="text-align: center; padding: 15px; font-weight: 200">
                <p><span style="font-weight: 700">ABOUT US</span></p>
                百分民宿是以高端民宿为主体，<br />
                平价民宿做为平衡项目的高端民宿体验店，
                <br />目前套房涵盖：<br />
                日系名宿、韩系风格、复式公寓等常见户型，<br />
                力求给您最极佳的住宿体验。
              </div>
            </div>
            <div class="grip-col-1-2"></div>
          </div>
          <div class="grip-col-2">
            <div class="grip-col-2-1"></div>
            <div class="grip-col-2-2">
              <div style="font-size: 48px; margin-bottom: 15px">百分的故事</div>
              <div
                style="font-size: 20px; font-weight: 100; margin-bottom: 50px"
              >
                The story about 100 Points.
              </div>
              <div class="box-button">
                了解更多 <i class="el-icon-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="enjoy-it">
        <div class="title-box">
          <div class="title-box-cn">乐享其中</div>
          <div class="title-box-en">Let us enjoy it</div>
        </div>
        <div class="video-box">
          <video
            width="885px"
            height="500px"
            muted
            controls
            loop
            poster="../assets/logo.svg"
          >
            <source src="../assets/bg_slit.mp4" type="video/mp4" />
            您的浏览器不支持 video 标签。
          </video>
        </div>
      </div>
      <div class="series">
        <div class="title-box">
          <div class="title-box-cn">百分系列</div>
          <div class="title-box-en">100 Points Series</div>
        </div>
        <div class="series-row-box">
          <div class="series-row-box-border">
            <div class="series-row-box-img"></div>
          </div>
          <div class="series-row-box-info">
            <div style="font-size: 12px; font-weight: 200; margin: 25px 0 5px">
              100Ponits - Boutique viewing room
            </div>
            <div class="series-row-box-info-title-box">
              <div
                style="font-weight: 700; font-size: 26px; display: inline-block"
              >
                百分 精品观景房
              </div>
              <div>
                <span style="color: red; font-weight: 600; font-size: 22px"
                  >￥988</span
                >
                <span style="font-size: 12px; font-weight: 200"> /天</span>
              </div>
            </div>
            <div style="font-size: 12px; font-weight: 200; margin-top: 5px">
              长期有房，需提前一个月预定
            </div>
            <div class="facility">
              <ul>
                <li><i class="el-icon-circle-check"></i> 热水</li>
                <li><i class="el-icon-circle-check"></i> 泳池</li>
                <li><i class="el-icon-circle-check"></i> WIFI</li>
              </ul>
              <ul>
                <li><i class="el-icon-circle-check"></i> 免费停车位</li>
                <li>
                  <i class="el-icon-circle-check"></i> 暖气 /
                  空调&nbsp;&nbsp;&nbsp;&nbsp;
                </li>
                <li><i class="el-icon-circle-check"></i> 提供早餐</li>
              </ul>
            </div>
            <div class="series-info">
              整体呈现欧式风格，具有开阔的观景角度，开放式阳台，
              落地移门，即使关上门门外景色也一览无余，
              同时我们配有暖色卧室，在您欣赏窗外景色的同时带给您家一样的舒适。
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-top: 30px;
                max-width: 520px;
              "
            >
              <div class="box-button">更多</div>
              <div class="box-button">立即订购</div>
            </div>
          </div>
        </div>
        <div class="series-row-box" style="margin-top: -3px">
          <div class="series-row-box-border" style="right: 0">
            <div
              class="series-row-box-img"
              :style="{ backgroundImage: 'url(' + smallHome + ')' }"
            ></div>
          </div>
          <div class="series-row-box-info" style="left: 0">
            <div style="font-size: 12px; font-weight: 200; margin: 25px 0 5px">
              100Ponits - Boutique viewing room
            </div>
            <div class="series-row-box-info-title-box">
              <div
                style="font-weight: 700; font-size: 26px; display: inline-block"
              >
                百分 精品小户型房
              </div>
              <div>
                <span style="color: red; font-weight: 600; font-size: 22px"
                  >￥588</span
                >
                <span style="font-size: 12px; font-weight: 200"> /天</span>
              </div>
            </div>
            <div style="font-size: 12px; font-weight: 200; margin-top: 5px">
              长期有房，需提前一个月预定
            </div>
            <div class="facility">
              <ul>
                <li><i class="el-icon-circle-check"></i> 热水</li>
                <li><i class="el-icon-circle-check"></i> 电视</li>
                <li><i class="el-icon-circle-check"></i> WIFI</li>
              </ul>
              <ul>
                <li><i class="el-icon-circle-check"></i> 免费停车位</li>
                <li>
                  <i class="el-icon-circle-check"></i> 暖气 /
                  空调&nbsp;&nbsp;&nbsp;&nbsp;
                </li>
                <li><i class="el-icon-circle-check"></i> 电竞房</li>
              </ul>
            </div>
            <div class="series-info">
              小户型房，装修风格简约但不简单，非常适合年轻人居住，其中有大屏电视，开放式厨房以及地毯式观影区，该户型配有一个独立电竞房，可以满足您的一时之需
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-top: 30px;
                max-width: 520px;
              "
            >
              <div class="box-button">更多</div>
              <div class="box-button">立即订购</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  components: {
    // HelloWorld,
  },
  data() {
    return {
      smallHome: require("../assets/01upw9ab6ggqa5ujavybwb3134.webp"),
    };
  },
};
</script>
<style>
.series-info {
  line-height: 22px;
  max-width: 520px;
}
.series-row-box-info-title-box {
  display: flex;
  justify-content: space-between;
}
.facility {
  width: 100%;
  margin: 40px 0;
}
.facility ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* width: 50%; */
  /* width: 450px; */
  padding: 0;
}
.facility li {
  width: 150%;
}
.facility li i {
  color: green;
}

.series-row-box {
  height: 500px;
  position: relative;
  width: 80%;
  margin-left: 10%;
}
.series-row-box-border {
  height: 100%;
  width: 50%;
  background-color: transparent;
  position: absolute;
}
.series-row-box-info {
  height: 100%;
  width: 55%;
  /* background-color: blueviolet; */
  position: absolute;
  right: 0;
  border: 3px solid #8373658a;
  border-radius: 6px;
  box-sizing: border-box;
  z-index: 1;
  padding: 50px 10% 50px 10%;
}
.series-row-box-img {
  height: 80%;
  position: absolute;
  width: 100%;
  border-radius: 6px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  top: 10%;
  background-image: url(../assets/01tt7rulyxml2wsg1anjhr3138.webp);
  background-size: cover;
  background-position: center;
  z-index: 99;
}

.title-box-cn {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
.title-box-en {
  font-size: 16px;
  font-weight: 200;
  margin-bottom: 25px;
}
.home-header-placeholder {
  height: calc(100vh - 61px);
  width: 100vw;
  background-image: url("../assets/homePageBackPlaceholder2.webp");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.header-tips {
  background-image: url("../assets/Joy_homeStay.png");
  height: 280px;
  width: 600px;
  background-size: cover;
}
.main-container {
  margin: 50px;
  min-width: 817px;
}
.grip-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  height: calc(100vh - 150px);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.grip-col-1,
.grip-col-2 {
  width: calc(50vw);
  height: 100%;
  /* min-height: 600px; */
  background-image: url(../assets/video-bg.png);
  background-size: 10% 10%;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.grip-col-1 {
  border-radius: 6px 0 0 6px;
}

.grip-col-2 {
  border-radius: 0 6px 6px 0;
}
.grip-col-1-1 {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.grip-col-1-2 {
  height: 50%;
  background-image: url(../assets/grip-col-1-2.webp);
  width: 100%;
  background-size: cover;
  background-position: bottom;
  border-radius: 0 0 0 6px;
}
.grip-col-2-1 {
  height: 50%;
  background-image: url(../assets/grip-col-2-1.webp);
  width: 100%;
  background-size: cover;
  background-position: bottom;
  border-radius: 0 6px 0 0;
}
.grip-col-2-2 {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.title-box {
  margin: 40px auto 20px;
  text-align: center;
}
.box-button {
  border: 1.5px solid #2c3e50;
  padding: 8px 35px;
  width: 100px;
  text-align: center;
}
.video-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.enjoy-it {
  padding: 15px 0;
  background-image: url(../assets/video-bg.png);
  background-size: 10% 10%;
  background-position: center;
  height: 650px;
}
.series {
  /* height: 800px; */
}
</style>
